<template >
  <div class="text-con">
    <VueDragResize
      :x="xNum"
      :y="yNum"
      parent="diy-phone"
      @clicked="myDate($event)"
      :handles="['tm','bm','ml','mr']"
      resizable
      @dragging="resize"
      :style="comObj.wordStyle"
      @click.stop.native="listTxt"
    >
      <div>文本内容...</div>
    </VueDragResize>
  </div>
</template>
<script>
import VueDragResize from "vue-drag-resize";
import stote from "@/store/index";
export default {
  components: { VueDragResize },
  props: ["comObj", "nowComIdx", "text"],
  data() {
    return {
      stote,
      TextData: [],
      xNum: 0,
      yNum: 0
    };
  },
  methods: {
    myDate(ev) {
      console.log(34234);
    },
    resize(newRect) {
      this.xNum = newRect.left;
      this.yNum = newRect.top;
    },
    resizePrt(newRect) {
      console.log(newRect);
    },
    // 落入组件触发
    onDrop(item, dropResult) {
      this[item] = this.applyDrag(this[item], dropResult);
      console.log(this[item]);
      // 当前页面数据存入本地JSON
      // localStorage.setItem("page_json", JSON.stringify(this[item]));
      // // 设置当前页PageJSON内容
      // for (const i in this.AllPage_JSONCON) {
      //   if (this.AllPage_JSONCON[i].id === this.pageIdx) {
      //     this.AllPage_JSONCON[i].page_json = localStorage.getItem("page_json");
      //   }
      // }
      // this.$store.commit("apply/SET_PageJSON", this.AllPage_JSONCON);
    },
    // 组件拖拽到手机框
    applyDrag(arr, dragResult) {
      console.log(dragResult);
      const { removedIndex, addedIndex, payload } = dragResult;
      if (removedIndex === null && addedIndex === null) return arr;
      const result = [...arr];
      let itemToAdd = {};
      switch (payload.type) {
        case "DiyImg":
          itemToAdd.id = result.length + 1;
          itemToAdd.data = {};
          itemToAdd.type = "DiyImg";
          break;
        case "DiyText":
          itemToAdd.id = result.length + 1;
          itemToAdd.data = {};
          itemToAdd.type = "DiyText";
          break;
        default:
          break;
      }

      if (removedIndex !== null) {
        itemToAdd = result.splice(removedIndex, 1)[0];
      }

      if (addedIndex !== null) {
        result.splice(addedIndex, 0, itemToAdd);
      }
      return result;
    },
    getTextChildPayload(index) {
      return this.TextData[index];
    },
    // 组件落入检测
    shouldAcceptDrop(val, ol) {
      return true;
    },
    listTxt() {
      this.$emit('listTxt')
    }
  }
};
</script>
<style lang="scss" scoped>
.text-con {
  width: 100%;
  height: 200px;
}
</style>
